<template>
	<div class="has-bottom ">
		<div ref="info">
			<!-- 商品头部 -->
			<productHead :list="Data.imgList" :imgUrl="ThumbnailUrl410" :video-url="VideoUrl" :scroll-top="scrollTop"
				@changeDetail="changeDetail" @clickLeft="clickLeft" />

			<!-- 商品简介 -->
			<productIntro :data="Data" @changeFavState="changeFavState" @share="share" />

			<!-- 商品标签 -->
			<productTag v-show="ProductInfo && ProductInfo.TagsList && ProductInfo.TagsList.length > 0"
				:tag-list="ProductInfo.TagsList" />

			<!-- 运费 -->
			<productFreight :data="Data" />

			<!-- 促销、配送 -->
			<div v-show="Data.PolicyList && Data.PolicyList.length > 0" class="product-option mt-10">
				<productOption v-if="Data.PolicyList && Data.PolicyList.length > 0" opt-type="sales"
					:policy-list="Data.PolicyList" />
				<!-- <productOption opt-type="post" :product="ProductInfo" :address="UserAddress" @changeAddress="changeAddress" /> -->
			</div>

			<!--参数、规格 -->
			<div
				v-show="(ProductInfo.ProductAttributesList && ProductInfo.ProductAttributesList.length > 0) || ProductInfo.ParamerValue"
				class="product-option mt-10">
				<productOption v-if="ProductInfo.ProductAttributesList && ProductInfo.ProductAttributesList.length > 0"
					opt-type="attr" :attr-list="ProductInfo.ProductAttributesList" :product="ProductInfo" @showOpt="showSpec" />
				<productOption v-if="ProductInfo.ParamerValue" opt-type="param" :product="ProductInfo" />
			</div>

			<!-- 评价模块 -->
			<productEvaluate :data="evaluateData" :product-id="ProductID" />
			<div class="mt-20 bg-white br-12 mb-20" @click="gotoSupplier()" v-if="switch203 == 1 && ProductInfo.SupplierId > 0">
				<div class="flex-s-c ptb-28 plr-20 hb pos-r">
					<svg-icon icon-class="store-2" class="color-second fs-32 mr-10 mt--2" />
					<p class="fs-26 color-black flex-1">{{ Data.SupplierInfo.Name }}</p>
					<p class="tac">
						<span class="item-store-btn">进店</span>
					</p>
				</div>
			</div>
		</div>
		<!-- 详情模块 -->
		<div class="product-detail mt-10">
			<p class="product-detail-tle fw-b">商品详情</p>
			<div v-show="ProductInfo.Description" class="pt-15" v-html="ProductInfo.Description" />
		</div>

		<!-- 底部栏 -->
		<shopCart car-type="productDetail" :car-list="carList" :shop-data="ProductInfo" :ActivityData="ActivityData"
			:tel="tel" @updateCart="updateCart" @showSpec="showSpec" :storeId="storeId" :isQucikOrder="isQucikOrder" />

		<!-- 规格弹窗 -->
		<van-popup v-model="popupData.show" position="bottom" class="bottom-popup" @closed="closePopup">
			<!--<ProductSpec :data="popupData.data" :switch85="switch85" :switch203="switch203" :Source="0" :ActivityData="ActivityData" :GradeId="userData.GradeId" :ActivityType="ActivityType" :popup-type="popupData.type" page-type="detail" @closePopup="closePopup" @addCart="addCart" @buyNow="buyNow" />-->
			<specTree :data="popupData.data" :switch85="switch85" :switch203="switch203" :Source="0" :switch7="switch7"
				:ActivityData="ActivityData" :GradeId="userData.GradeId" :ActivityType="ActivityType" :popup-type="popupData.type"
				page-type="detail" @closePopup="closePopup" @addCart="addCart" @buyNow="buyNow" :storeId="storeId"
				:AddNum="ProductInfo.AddNum" :isQucikOrder="isQucikOrder" />
		</van-popup>
	</div>
</template>

<script>
import { GetBusinessFunction } from 'api/businessSetting'
import productHead from 'components/productDetail/head'
import productIntro from 'components/productDetail/introduction'
import productTag from 'components/productDetail/tag'
import productFreight from 'components/productDetail/freight'
import productOption from 'components/productDetail/option'
import productEvaluate from 'components/productDetail/evaluate'
import shopCart from 'components/shopCart'
//import ProductSpec from 'components/productDetail/spec'
import specTree from 'components/productDetail/specTree'

import { GetInintProductDetailInfo, GetAppProductSimpleInfo, GetCommentListByProduct, GetUserCarList, AddOrUpdateAmount, GetUserSendStore } from 'api/product'
import { IsSupplierPage } from 'api/supplier'
import { GetUserDetail } from 'api/member'

export default {
	components: {
		productHead,
		productIntro,
		productTag,
		productFreight,
		productOption,
		productEvaluate,
		shopCart,
		specTree
	},
	data() {
		return {
			// 头部数据
			scrollTop: 0,
			tel: '',

			Data: {},
			ProductInfo: {},
			ActivityData: {},
			UserAddress: {},

			evaluateData: {},
			carList: [],
			ProductID: 0,

			// sku 商品规格弹窗
			popupData: {
				data: {},
				type: 'sku',
				show: false
			},
			cartRequestList: [],
			commentRequest: {
				page: 1,
				size: 10
			},
			ActivityType: 0,
			userData: {},
			switch203: 0,
			switch85: 0, // 1-成功 0-失败 2-未登陆
			switch7: 0,
			VideoUrl: '',
			ThumbnailUrl410: '',
			storeId: '',
			isQucikOrder: true,
			unfurnished:false,
		}
	},
	created() {
		this.commentRequest.product_id = this.$route.params.id
		this.ProductID = Number(this.$route.params.id)
		console.log(this.$route.params.id,)
		this.GetUserSendStore()
		//this.GetInintProductDetailInfo()
		this.GetCommentListByProduct()
		//this.GetUserCarList()
		this.GetUserDetail()
		this.GetBusinessFunction()
		this.IsSupplierPage()

	},
	mounted() {
		this.$nextTick(function () {
			window.addEventListener('scroll', this.onScroll)
		})
	},
	methods: {
		GetUserSendStore() {
			GetUserSendStore().then(res => {
				if (res.Data >= 0) {
					this.storeId = res.Data.toString()
					this.GetInintProductDetailInfo()
					this.GetUserCarList()
				}
			})
		},
		GetBusinessFunction() {
			GetBusinessFunction(203).then(res => {
				if (res) {
					this.switch203 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(85).then(res => {
				if (res) {
					this.switch85 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(7).then(res => {
				if (res) {
					this.switch7 = res.Data[0].Value;
				}
			})
		},
		IsSupplierPage(){
			IsSupplierPage({}).then(res => {
				if (res) {
					this.unfurnished = res.Data;
					console.log(this.unfurnished)
				}
			})
		},
		// 商品、详情切换
		changeDetail(index) {
			console.log(index)
			// 加入锚点
			let height = 0
			switch (index) {
				case 0:
					height = 0
					break
				case 1:
					height = this.$refs.info.offsetHeight - 88
					break
			}
			// 这里需要搞一个滚动过渡动画
			// document.documentElement.scrollTop = height
			this.$utils.animateScrollTop(height)
		},
		clickLeft() {
			this.$utils.back(this.$route.path)
		},

		// 更改收藏状态
		changeFavState(val) {
			this.Data.IsFavorite = val
		},
		showSpec(ActivityType) {
			if (ActivityType != 'attr') {
				this.ActivityType = ActivityType
			}
			this.popupData.data = this.ProductInfo
			this.popupData.show = true
		},
		closePopup() {
			console.log('guanbi')
			this.popupData.show = false
			this.ActivityType = 0
		},
		addCart(arr) {
			console.log(arr)
			this.cartRequestList = arr
			if (this.cartRequestList.length <= 0) {
				this.$toast.fail('请选择商品')
				return
			}
			this.AddOrUpdateAmount()
		},
		buyNow(arr) {
			console.log(arr)
			this.cartRequestList = arr
			// this.AddOrUpdateAmount()
		},
		// 调用分享弹窗
		share() {

		},
		changeAddress(address) {
			this.UserAddress = address
		},
		updateCart(bool) {
			if (bool) {
				this.GetUserCarList()
			}
		},

		// 滚动事件触发下拉加载
		onScroll() {
			this.scrollTop = this.$utils.getScrollTop()
		},

		GetInintProductDetailInfo() {
			GetAppProductSimpleInfo({ productId: this.$route.params.id, InfoType: 1, storeId: this.storeId }).then(res => {
				if (res) {
					console.log('购物车：' + res)
					this.Data = res.Data
					this.ProductInfo = res.Data.ProductInfo
					this.ActivityData = res.Data.ActivityData
					this.changeArr(this.ProductInfo)
					this.UserAddress = res.Data.UserAddress
					this.ThumbnailUrl410 = res.Data.ProductInfo.ThumbnailUrl410
					if (res.Data.ProductInfo.ImageUrl) {
						this.Data.imgList = res.Data.ProductInfo.ImageUrl.split(',')
						this.ProductInfo.logo = this.Data.imgList[0]
					}
					if (res.Data.ProductInfo.VideoUrl) {
						this.VideoUrl = res.Data.ProductInfo.VideoUrl
					}
					if (res.Data.StoreInfo) {
						this.tel = res.Data.ServiceTel
					}
				}
			})
		},

		// 整理数据
		changeArr(item, isNew) {
			const _this = this
			console.log(this)
			// 图片列表

			item.BaseUnit = item.DefaultUnit
			// 单位列表
			if (item.Unit && item.Unit.indexOf(',') !== -1) {
				item.UnitList = item.Unit.split(',')
				item.BaseUnit = item.UnitList[0]
			}
			// 换算比例列表
			if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
				item.UnitratioList = item.Unitratio.split(':')
			}
			// 按单限购
			if (item.ProductSkuList && item.ProductSkuList.length === 1) {
				item.oLimitBuy = item.ProductSkuList[0].LimitBuy
			}
			// 购物车数量（同步）
			// if (_this.carList && _this.carList.length > 0) {
			//   const _list = _this.carList
			//   for (let i = 0; i < _list.length; i++) {
			//     if (_list[i].ProductId === item.ID) { // 判断购物车中的商品是否为当前商品
			//       if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) { // 多规格商品
			//         for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
			//           if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
			//             for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
			//               if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
			//                 item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
			//                 console.log('匹配成功')
			//                 break
			//               }
			//             }
			//           }
			//         }
			//       } else { // 单规格商品
			//         console.log('同步单规格')
			//         item.Amount = _list[i].Amount
			//         break
			//       }
			//     } else {
			//       item.Amount = 0
			//     }
			//   }
			// } else {
			//   item.Amount = 0
			//   if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) { // 多规格商品
			//     for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
			//       if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
			//         for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
			//           item.ProductSkuAttrList[j].SkuList[k].Amount = 0
			//         }
			//       }
			//     }
			//   }
			// }

		},

		GetCommentListByProduct() {
			GetCommentListByProduct(this.commentRequest).then(res => {
				if (res) {
					console.log(res)
					this.evaluateData = res.Data
				}
			})
		},
		// 获取购物车列表
		GetUserCarList() {
			GetUserCarList({ priceType: 1, IsRetail: 0, storeId: this.storeId }).then(res => {
				if (res) {
					this.carList = res.Data
				}
			})
		},
		// 更新购物车
		AddOrUpdateAmount() {
			AddOrUpdateAmount(this.cartRequestList).then(res => {
				if (res) {
					console.log(res)
					this.popupData.show = false
					this.GetUserCarList()
				}
			})
		},
		//会员详情信息
		GetUserDetail() {
			GetUserDetail().then(res => {
				if (res) {
					this.userData = res.Data
				}
			})
		},
		gotoSupplier() {
			// if (this.Data.SupplierInfo.ShopUserStoreId > 0) {
			// 	this.$router.push('/businessDetail/' + this.Data.SupplierInfo.ShopUserStoreId)
			// } else {
			// 	window.location.href = "/m/supplier/supplierhome?id=" + this.ProductInfo.SupplierId;
			// }
			if (this.unfurnished) {
				window.location.href = "/m/supplier/supplierhome?id=" + this.ProductInfo.SupplierId;
			} else {
				this.$router.push('/businessDetail/' + this.Data.SupplierInfo.ShopUserStoreId)
			}
		},
	}
}
</script>
<style lang="scss" scoped>
// 详情
.product-detail {
	background: $colorF;
	padding: 16px 0;

	.product-detail-tle {
		padding: 0 32px;
		font-size: 30px;
		line-height: 1;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			width: 6px;
			border-radius: 3px;
			height: 30px;
			@include bg-primary;
			top: 0px;
			left: 15px;
		}
	}
}

.product-option {
	background: $colorF;
	padding: 25px 32px;
}

.bottom-popup {
	border-radius: 40px 40px 0 0;
}
</style>
